{% extends 'home/index.html'%}
{% block title %}
<title>订单确认</title>
{% endblock %}

{% block css %}

<link href="/static/home/css/cartstyle.css" rel="stylesheet" type="text/css" />

<link href="/static/home/css/jsstyle.css" rel="stylesheet" type="text/css" />

{% endblock %}

{% block js %}
<script type="text/javascript" src="/static/home/js/address.js"></script>
{% endblock %}

{% block con %}
<div class="concent">
    
<!--地址 -->
<div class="paycont">
<div class="address">
    <h3>
        确认收货地址
    </h3>
    <div class="control">
        <div class="tc-btn createAddr theme-login am-btn am-btn-danger">
            使用新地址
        </div>
    </div>
    <div class="clear">
    </div>
    <li class="user-addresslist" style="display: none">
        <div class="address-left">
            <div class="user DefaultAddr">
                <span class="buy-address-detail">
                    <span class="buy-user">
                        牛二
                    </span>
                    <span class="buy-phone">
                        15871145629
                    </span>
                </span>
            </div>
            <div class="default-address DefaultAddr">
                <span class="buy-line-title buy-line-title-type">
                    收货地址：
                </span>
                <span class="buy--address-detail">
                    <span class="province">
                        北京
                    </span>
                    <span class="city">
                        昌平
                    </span>
                    <span class="dist">
                        回龙观
                    </span>
                    <span class="street">
                        兄弟连IT教育
                    </span>
                </span>
            </div>
            <ins class="deftip hidden">默认地址</ins>
        </div>
        <div class="address-right">
            <span class="am-icon-angle-right am-icon-lg">
            </span>
        </div>
        <div class="clear">
        </div>
        <div class="new-addr-btn" >
            <a href="javascript:void(0)" class="rm" id="moren" onclick="moren(this);">
                设为默认
            </a>
            <span class="new-addr-bar rm">
                |
            </span>            
            <a href="javascript:void(0);" onclick="delClick(this);">
                删除
            </a>
        </div>
    </li>
    <ul class="AddressAll">

  
    </ul>
    <div class="clear">
    </div>
</div>
<!--物流 -->
<div class="logistics">
    <h3>选择物流方式</h3>
    <ul class="op_express_delivery_hot wllist">
        <li data-value="shunfeng" class="OP_LOG_BTN  op_express_delivery_hot_bottom">
            <i class="c-gap-right" style="background-position:0px -180px">
            </i>
            顺丰
            <span>
            </span>
        </li>
        <li data-value="yuantong" class="OP_LOG_BTN  ">
            <i class="c-gap-right" style="background-position:0px -468px">
            </i>
            圆通
            <span>
            </span>
        </li>
        <li data-value="shentong" class="OP_LOG_BTN  ">
            <i class="c-gap-right" style="background-position:0px -1008px">
            </i>
            申通
            <span>
            </span>
        </li>
        <li data-value="yunda" class="OP_LOG_BTN  ">
            <i class="c-gap-right" style="background-position:0px -576px">
            </i>
            韵达
            <span>
            </span>
        </li>
        <li data-value="zhongtong" class="OP_LOG_BTN op_express_delivery_hot_last ">
            <i class="c-gap-right" style="background-position:0px -324px">
            </i>
            中通
            <span>
            </span>
        </li>        
    </ul>
</div>
<div class="clear">
</div>
<!--支付方式-->
<div class="logistics">
    <h3>
        选择支付方式
    </h3>
    <ul class="pay-list">
        <li class="pay card" data-value="yinian">
            <img src="/static/home/images/wangyin.jpg">
            银联
            <span>
            </span>
        </li>
        <li class="pay qq" data-value="weixin">
            <img src="/static/home/images/weizhifu.jpg">
            微信
            <span>
            </span>
        </li>
        <li class="pay taobao" data-value="zhifubao">
            <img src="/static/home/images/zhifubao.jpg">
            支付宝
            <span>
            </span>
        </li>
    </ul>
</div>
<div class="clear">
</div>
<!--订单 -->
<div class="concent">
    <div id="payTable">
        <h3>
            确认订单信息
        </h3>
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-item">
                    <div class="td-inner">
                        商品信息
                    </div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">
                        单价
                    </div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">
                        数量
                    </div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">
                        金额
                    </div>
                </div>
                <div class="th th-oplist">
                    <div class="td-inner">
                        配送方式
                    </div>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
        {% for v in data %}
        <div class="bundle  bundle-last">
            <div class="bundle-main">
                <ul class="item-content clearfix">
                    <div class="pay-phone">
                        <li class="td td-item">
                            <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                    <img src="{{ v.goodsid.pic_url }}" style="width: 99px" class="itempic J_ItemImg">
                                </a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">
                                       {{ v.goodsid.title }}
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                           
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                    <em class="J_Price price-now">
                                        {{ v.goodsid.price }}
                                    </em>
                                </div>
                            </div>
                        </li>
                    </div>
                    <li class="td td-amount">
                        <div class="amount-wrapper ">
                            <div class="item-amount ">
                                <span class="phone-title">
                                    购买数量
                                </span>
                                <div class="sl">
                                    <p>{{ v.num }}</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="td td-sum">
                        <div class="td-inner">
                            <em tabindex="0" class="J_ItemSum number">
                                {% load pagetag %}
                                {% cartxj v.num v.goodsid.price %}
                            </em>
                        </div>
                    </li>
                    <li class="td td-oplist">
                        <div class="td-inner">
                            <span class="phone-title">
                                配送方式
                            </span>
                            <div class="pay-logis">
                              全场包邮
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="clear">
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
        {% endfor %}
        <div class="clear">
        </div>
        <div class="pay-total">
            <!--留言-->
            <div class="order-extra">
                <div class="order-user-info">
                    <div id="holyshit257" class="memo">
                        <label>
                            买家留言：
                        </label>
                        <input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明"
                        class="memo-input J_MakePoint c2c-text-default memo-close">
                        <div class="msg hidden J-msg">
                            <p class="error">
                                最多输入500个字符
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--优惠券 -->
          
            <div class="clear">
            </div>
        </div>
        <!--含运费小计 -->
        <div class="buy-point-discharge ">
            <p class="price g_price ">
                合计（含运费）
                <span>
                    ¥
                </span>
                <em class="pay-sum">
                    244.00
                </em>
            </p>
        </div>
        <!--信息 -->
        <div class="order-go clearfix">
            <div class="pay-confirm clearfix">
                <div class="box">
                    <div tabindex="0" id="holyshit267" class="realPay">
                        <em class="t">
                            实付款：
                        </em>
                        <span class="price g_price ">
                            <span>
                                ¥
                            </span>
                            <em class="style-large-bold-red " id="J_ActualFee">
                                244.00
                            </em>
                        </span>
                    </div>
                    <div id="holyshit268" class="pay-address">
                        <p class="buy-footer-address">
                            <span class="buy-line-title buy-line-title-type">
                                寄送至：
                            </span>
                            <span class="buy--address-detail">
                                <span class="province">
                                </span>
                                <span class="city">
                                </span>
                                <span class="dist">
                                </span>
                                <span class="street">
                                </span>
                            </span>
                        </p>
                        <p class="buy-footer-address">
                            <span class="buy-line-title">
                                收货人：
                            </span>
                            <span class="buy-address-detail">
                                <span class="buy-user">
                                </span>
                                <span class="buy-phone">
                                </span>
                            </span>
                        </p>
                    </div>
                </div>
                <div id="holyshit269" class="submitOrder">
                    <form action="{% url 'home_ordercreate' %}" method="POST">
                    <div class="go-btn-wrap">
                        {% csrf_token %}
                        <input type="hidden" name="addressid" value="">
                        <input type="hidden" name="wl" value="">
                        <input type="hidden" name="buytype" value="">
                        <input type="hidden" name="cartids" value="{{ request.GET.cartids }}">
                        <a id="J_Go" href="javascript:void(0)" class="btn-go" tabindex="0" title="点击此按钮，提交订单">
                            提交订单
                        </a>
                        </form>
                    </div>
                    </form>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
    <div class="clear">
    </div>
</div>
<div class="theme-popover-mask">
</div>
<div class="theme-popover" style="height: 500px;">
    <!--标题 -->
    <div class="am-cf am-padding">
        <div class="am-fl am-cf">
            <strong class="am-text-danger am-text-lg">
                新增地址
            </strong>
            /
            <small>
                Add address
            </small>
        </div>
    </div>
    <hr/>
    <div class="am-u-md-12">
        <form class="am-form am-form-horizontal">
            <div class="am-form-group">
                <label for="user-name" class="am-form-label">
                    收货人
                </label>
                <div class="am-form-content">
                    <input type="text" id="user-name" placeholder="收货人">
                </div>
            </div>
            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">
                    手机号码
                </label>
                <div class="am-form-content">
                    <input id="user-phone" placeholder="手机号必填" type="email">
                </div>
            </div>
            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">
                    所在地
                </label>
                <div class="am-form-content address">
                    <select name="sheng">
                        {% for v in citys %}
                            <option value="{{ v.id }}">{{ v.name }}</option>
                        {% endfor %}
                    </select>
                    <select name="shi">
                        <option>--请选择--</option>
                    </select>
                    <select name="xian">
                        <option>--请选择--</option>
                    </select>
                   
                    
                </div>
            </div>
            <div class="am-form-group">
                <label for="user-intro" class="am-form-label">
                    详细地址
                </label>
                <div class="am-form-content">
                    <textarea class="" rows="3" id="user-intro" placeholder="输入100字以内详细地址"></textarea>                        
                </div>
            </div>
            <div class="am-form-group theme-poptit">
                <div class="am-u-sm-9 am-u-sm-push-3">
                    <div class="am-btn am-btn-danger" id="addressadd">
                        保存
                    </div>
                    <div class="am-btn am-btn-danger close" id="addressclose">
                        取消
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="clear">
</div>

<script type="text/javascript">

    // 获取当前用户的所有收货地址
    function getUserAllAddress(){
        // 清空之前的数据
        $('.AddressAll').empty()
        // 发送ajax请求获取数据
        $.get('{% url "home_addresslist" %}',function(data){
            console.log(data.error)
            if(data.error == 0){
                // 有数据
                var arr = data.data
                // 循环数据
                for (var i = 0; i < arr.length; i++) {
                    var li = $('.address li').eq(0).clone()
                    // 判断当前是否为默认
                    if(arr[i].isChecked){
                        li.addClass('defaultAddr')
                        li.find('.rm').remove()

                        //默认收货地址显示在提交窗口
                        $("#holyshit268").find('.province').text(arr[i].sheng)
                        $("#holyshit268").find('.city').text(arr[i].shi)
                        $("#holyshit268").find('.dist').text(arr[i].xian)
                        $("#holyshit268").find('.street').text(arr[i].info)
                        $("#holyshit268").find('.buy-user').text(arr[i].shr)
                        $("#holyshit268").find('.buy-phone').text(arr[i].shdh)
                        $('input[name=addressid]').val(arr[i].id)
                    }
                    li.attr('addrid',arr[i].id)
                    li.find('.buy-user').text(arr[i].shr)
                    li.find('.buy-phone').text(arr[i].shdh)
                    li.find('.province').text(arr[i].sheng)
                    li.find('.city').text(arr[i].shi)
                    li.find('.dist').text(arr[i].xian)
                    li.find('.street').text(arr[i].info)
                    // 让元素显示
                    li.show()
                    // 创建li加入到ul中
                    $('.AddressAll').append(li)
                }
            }else{
                // 没有数据
                alert('kadf')

            }
        },'json')
    }

    getUserAllAddress()    
    // 地址添加
    $('#addressadd').click(function(){
        var adds = {}
        adds.shr = $('#user-name').val()
        adds.shdh = $('#user-phone').val()
        adds.sheng = $('select[name=sheng]').val()
        adds.shi = $('select[name=shi]').val()
        adds.xian = $('select[name=xian]').val()
        adds.info = $('#user-intro').val()

        // 发送ajax请求,存储地址
        $.get('{% url "home_addressadd" %}',adds,function(data){
            getUserAllAddress()
            // 触发取消事件
            $('#addressclose').trigger('click')
        },'json')
    })

    // 封装函数运算总价
    function TotalPrice(){
        var Price = 0
        $('.J_ItemSum').each(function(){
            Price += Number($(this).text())
        })
        $('#J_ActualFee').text(Price.toFixed(2))
        $('.pay-sum').text(Price.toFixed(2))
    }

    TotalPrice()
    // 获取页面中的 下拉选框 绑定change事件
    $('.address select').click(function(){
        // 获取当前选中的元素的 id
        var id = $(this).val()

        // 发送ajax请求,获取下一级的数据
        $.get('{% url "home_getcitys" %}',{'id':id},function(data){
            // 判断返回的数据,如果为空,
            if(data.length == 0){ return }

            // 判断级别
            if(data[0].level == 2){
                var sel = $('.address select[name=shi]')
            }else if(data[0].level == 3){
                var sel = $('.address select[name=xian]')
            }

            var ops = ''
            // 遍历获取的结果,拼接成option选项
            for (var i = 0; i < data.length; i++) {
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 把拼接好的选项加入到下拉框中
            sel.html(ops)

        },'json')
    })
    // 选择地址,设为默认
    function moren(e){        
        var mr = $(e).parents('li').attr('addrid')      
        $.get("{% url 'home_addrmoren' %}",{'mr':mr},function(data){
           getUserAllAddress()
        },'json')
    }
    // 选择地址,逻辑删除
    function delClick(e){
        var sc = $(e).parents('li').attr('addrid')
        $.get("{% url 'home_dzsc' %}",{'sc':sc},function(data){
            getUserAllAddress()
        },'json')
    }
    
    // 选择地址,添加高亮
    $(".AddressAll li").live('click',function(){
        // 添加class defaultAssr,并删除同级元素该属性
        $(this).addClass('defaultAddr').siblings().removeClass('defaultAddr')
        // 获取当前选中的地址电话信息
        $("#holyshit268").find('.province').text($(this).find('.prvince').text())
        $("#holyshit268").find('.city').text($(this).find('.city').text())
        $("#holyshit268").find('.dist').text($(this).find('.dist').text())
        $("#holyshit268").find('.street').text($(this).find('.street').text())
        $("#holyshit268").find('.buy-user').text($(this).find('.buy-user').text())
        $("#holyshit268").find('.buy-phone').text($(this).find('.buy-phone').text())
        $('input[name=addressid]').val($(this).attr('addrid'))
    })

    // 提交订单
    $("#J_Go").click(function(){
        // 判断表单是否为空
        if(!$(this).parents('form').find('input[name=addressid]').val()){
            alert("请选择收货地址");
            return;
        }
        if(!$(this).parents('form').find('input[name=wl]').val()){
            alert('请选择物流');
            return;
        }
        if(!$(this).parents('form').find('input[name=buytype]').val()){
            alert('请选择支付方式');
            return;
        }
        // 获取表单,进行提交
        $(this).parents('form').submit()
    })

    // 选择支付方式
    $('.pay-list li').click(function(){
        $('input[name=buytype]').val($(this).attr('data-value'))
    })

    // 选择物流方式
    $('.wllist li').click(function(){
        $('input[name=wl]').val($(this).attr('data-value'))
    })    

</script>
{% endblock %}